<template>
  <div class="container">
    <el-card class="choice">
      <!-- 按钮 -->
      <el-row>
        <el-button
          type="success"
          size="small"
          icon="el-icon-edit"
          style="float: right"
          @click="$router.push('new')"
          >新增试题</el-button
        >
      </el-row>
      <!-- 筛选 -->
      <el-form label-width="80px" size="small" style="margin-top: 15px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="学科">
              <el-select
                v-model="form.subjectID"
                placeholder="请选择"
                @change="getdirectoryslist"
              >
                <el-option
                  :label="item.label"
                  :value="item.value"
                  v-for="item in subjectOptions"
                  :key="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="二级目录">
              <el-select v-model="form.catalogID" placeholder="请选择">
                <el-option
                  :label="item.label"
                  :value="item.value"
                  v-for="item in catalogOptions"
                  :key="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标签">
              <el-select v-model="form.tags" placeholder="请选择">
                <el-option
                  :label="item.label"
                  :value="item.value"
                  v-for="item in tagsOptions"
                  :key="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关键字">
              <el-input v-model="form.keyword"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="6">
            <el-form-item label="试题类型">
              <el-select v-model="form.questionType" placeholder="请选择">
                <el-option
                  :label="item.label"
                  :value="item.value + ''"
                  v-for="item in questionTypeoption"
                  :key="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="难度">
              <el-select v-model="form.difficulty" placeholder="请选择">
                <el-option
                  :label="item.label"
                  :value="item.value + ''"
                  v-for="item in difficultyoption"
                  :key="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="方向">
              <el-select v-model="form.direction" placeholder="请选择">
                <el-option
                  :label="item"
                  :value="item"
                  v-for="item in directionoption"
                  :key="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="录入人">
              <el-select v-model="form.creatorID" placeholder="请选择">
                <el-option
                  :label="item.username"
                  :value="item.id"
                  v-for="item in userOptions"
                  :key="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="6">
            <el-form-item label="题目备注">
              <el-input v-model="form.remarks"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="企业简称">
              <el-input v-model="form.shortName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="城市">
              <el-select
                v-model="form.province"
                placeholder="请选择"
                style="width: 40%; margin-right: 5px"
                @change="getcitylist"
              >
                <el-option
                  :label="item"
                  :value="item"
                  v-for="item in provincesoptions"
                  :key="item"
                ></el-option>
              </el-select>
              <el-select
                v-model="form.city"
                placeholder="请选择"
                style="width: 50%"
              >
                <el-option
                  :label="item"
                  :value="item"
                  v-for="item in citysoption"
                  :key="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-button
              type="primary"
              size="small"
              style="float: right; margin-left: 10px"
              @click="search"
              >搜索</el-button
            >
            <el-button size="small" style="float: right" @click="removelist"
              >清除</el-button
            >
          </el-col>
        </el-row>
      </el-form>
      <!-- 标签页tab切换 -->
      <el-tabs v-model="form.chkState" type="card" @tab-click="handleClick">
        <el-tab-pane label="全部" name="null"></el-tab-pane>
        <el-tab-pane label="待审核" name="0"></el-tab-pane>
        <el-tab-pane label="已审核" name="1"></el-tab-pane>
        <el-tab-pane label="已拒绝" name="2"></el-tab-pane>
      </el-tabs>
      <!-- 消息记录条 -->
      <el-alert
        :title="`消息一共${counts}条`"
        type="info"
        :closable="false"
        show-icon
      >
      </el-alert>
      <!-- 表格列表 -->
      <el-table :data="tableData" style="width: 100%; margin-top: 10px">
        <el-table-column
          prop="number"
          label="试题编号"
          width="200"
        ></el-table-column>
        <el-table-column prop="subject" label="学科"></el-table-column>
        <el-table-column prop="catalog" label="目录"> </el-table-column>
        <el-table-column prop="questionType" label="题型">
          <template #default="{ row }">{{ row.questionType | qt }}</template>
        </el-table-column>
        <el-table-column label="题干" width="250">
          <template #default="{ row }">
            <div v-html="row.question"></div>
          </template>
        </el-table-column>
        <el-table-column prop="addDate" label="录入时间" width="200">
          <template #default="{ row }">{{
            row.addDate | parseTimeByString
          }}</template>
        </el-table-column>
        <el-table-column prop="difficulty" label="难度">
          <template #default="{ row }">{{ row.difficulty | dt }}</template>
        </el-table-column>
        <el-table-column prop="creator" label="录入人" width="100">
        </el-table-column>
        <el-table-column prop="chkState" label="审核状态">
          <template #default="{ row }">{{ row.chkState | ct }}</template>
        </el-table-column>
        <el-table-column prop="chkRemarks" label="审核意见" width="180">
        </el-table-column>
        <el-table-column prop="chkUser" label="审核人" width="100">
        </el-table-column>
        <el-table-column prop="publishState" label="发布状态">
          <template #default="{ row }">{{ row | pt }}</template>
        </el-table-column>
        <el-table-column label="操作" width="200" fixed="right">
          <template #default={row}>
            <el-link type="primary" @click="showPreview(row)">预览</el-link>
            <el-link type="primary" @click="choiceCheck(row)" :disabled="row.chkState!==0">审核</el-link>
            <el-link type="primary" @click="$router.push(`new?id=${row.id}`)" :disabled="row.publishState!==1">修改</el-link>
            <el-link type="primary" @click="choicepublish(row)">{{row.publishState===0?'上架' : '下架'}}</el-link>
            <el-link type="primary" @click="dellist(row.id)" :disabled="row.publishState===0">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页符 -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="form.page"
          background
          :page-sizes="[5, 10, 20, 50]"
          :page-size="form.pagesize"
          layout="prev, pager, next,sizes,  jumper"
          :total="counts"
        >
        </el-pagination>
      </div>
      <!-- 预览对话框 -->
      <QuestionsPreview :dialogVisible.sync="dialogVisible" ref="questionpreview" :data="questionInfo"></QuestionsPreview>
      <!-- 审核对话框 -->
      <QuestionsCheck :checkdialogVisible.sync="checkdialogVisible" :data="questionInfo" @uploadlist="questionChoiceList()"></QuestionsCheck>
    </el-card>
  </div>
</template>

<script>
import { choice, choiceAdd, choicePublish } from '@/api/hmmm/questions.js'
import {
  difficulty,
  questionType,
  chkType,
  direction
} from '@/api/hmmm/constants.js'
// 标签
import { simple as tagslist } from '@/api/hmmm/tags.js'
// 获取城市和城市下地区
import { provinces, citys } from '@/api/hmmm/citys.js'
// 企业列表
import { list as companyslist } from '@/api/hmmm/companys.js'
// 简单目录列表
import { simple as directoryslist } from '@/api/hmmm/directorys.js'
// 学科列表
import { simple as getsimple } from '@/api/hmmm/subjects.js'
// 录入人列表
import { simple as users } from '@/api/base/users.js'
import QuestionsPreview from '../components/questions-preview.vue'
import QuestionsCheck from '../components/questions-check.vue'

export default {
  components: { QuestionsPreview, QuestionsCheck },
  data () {
    return {
      form: {
        page: 1,
        pagesize: 20,
        subjectID: null,
        catalogID: null,
        tags: null,
        keyword: null,
        questionType: null,
        difficulty: null,
        direction: null,
        creatorID: null,
        remarks: null,
        shortName: null,
        city: null,
        chkState: 'null',
        province: null
      },
      // activeName: null, // 标签页选中的
      tableData: [], // 表格关联的数据
      counts: 0, // 消息记录的总条数
      // 学科选项
      subjectOptions: [],
      // 目录选项
      catalogOptions: [],
      // 企业选项
      enterpriseOptions: [],
      // 城市
      provincesoptions: provinces(),
      // 地区
      citysoption: [],
      // 方向
      directionoption: direction,
      // 题型
      questionTypeoption: questionType,
      // 难度
      difficultyoption: difficulty,
      // 标签
      tagsOptions: [],
      // 录入人
      userOptions: [],
      dialogVisible: false, // 预览对话框显示隐藏
      questionInfo: {}, // 预览框信息
      publishState: 0, // 上下架状况
      checkdialogVisible: false // 审核对话框显示隐藏
    }
  },
  created () {
    this.questionChoiceList()
    this.getsimplelist()
    this.getcompanyslist()
    // this.gettagslist()
    this.getuserlist()
  },
  filters: {
    dt (value) {
      const res = difficulty.find((item) => item.value === +value)
      return res ? res.label : '未知'
    },
    qt (value) {
      const res = questionType.find((item) => item.value === +value)
      return res ? res.label : '未知'
    },
    ct (value) {
      const res = chkType.find((item) => item.value === +value)
      return res ? res.label : '未知'
    },
    pt (row) {
      if (row.publishState === 1 && row.chkState === 1) {
        return '已发布'
      }
      if (row.publishState === 1 && row.chkState === 0) {
        return '已下架'
      }
      return '待发布'
    }
  },
  methods: {
    // 筛选部分
    // 获取城市下地区
    getcitylist () {
      this.form.city = null
      this.citysoption = citys(this.form.province)
    },
    // 获取企业列表
    async getcompanyslist () {
      const { data } = await companyslist()
      // console.log(data)
      this.enterpriseOptions = data.items
    },
    // 获取简单目录
    async getdirectoryslist () {
      this.form.catalogID = null
      const { data } = await directoryslist({ subjectID: this.form.subjectID })
      // console.log(data)
      this.catalogOptions = data
      this.form.tags = null
      const { data: res } = await tagslist({ subjectID: this.form.subjectID })
      this.tagsOptions = res
    },
    // 获取学科简单列表
    async getsimplelist () {
      const { data } = await getsimple()
      // console.log(data)
      this.subjectOptions = data
    },
    // 获标签
    // async gettagslist () {
    //   const { data } = await tagslist()
    //   this.tagsOptions = data
    // },
    // 获取录入人列表
    async getuserlist () {
      const { data } = await users()
      // console.log(data)
      this.userOptions = data
    },
    // 获取搜索列表

    // 点击标签页切换
    handleClick (tab, event) {
      // console.log(tab)
      this.questionChoiceList()
    },

    // 渲染题库列表
    async questionChoiceList () {
      const res = {
        ...this.form
      }
      if (res.chkState === 'null') {
        res.chkState = null
      }
      const { data } = await choice(res)
      console.log(data)
      this.tableData = data.items
      this.counts = data.counts
      this.publishState = data.publishState
    },

    // 分页符方法
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      this.pagesize = val
      this.questionChoiceList()
    },
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`)
      this.page = val
      this.questionChoiceList()
    },

    // 清除按钮
    removelist () {
      this.form = {
        page: 1,
        pagesize: 20,
        subjectID: null,
        catalogID: null,
        tags: null,
        keyword: null,
        questionType: null,
        difficulty: null,
        direction: null,
        creatorID: null,
        remarks: null,
        shortName: null,
        city: null,
        chkState: 'null',
        province: null
      }
      this.questionChoiceList()
    },

    // 搜索按钮
    search () {
      this.form.page = 1
      this.questionChoiceList()
    },

    // 预览对话框
    showPreview (questionInfo) {
      this.dialogVisible = true
      this.questionInfo = questionInfo
      this.$nextTick(() => {
        this.$refs.questionpreview.open()
      })
    },

    // 删除精选题目
    dellist (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        this.$message.success('删除成功')
        await choiceAdd({ id, choiceState: 0 })
        // console.log(data)
        this.questionChoiceList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },

    // 精选题库上下架
    choicepublish (row) {
      this.$confirm(`您确定${row.publishState === 0 ? '上架' : '下架'}这道题目吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        this.publishState = row.publishState === 0 ? 1 : 0
        this.$message.success(`${row.publishState === 0 ? '上架' : '下架'}成功`)
        const { data } = await choicePublish({ id: row.id, publishState: this.publishState })
        console.log(data)
        this.questionChoiceList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: `已取消${row.publishState === 0 ? '上架' : '下架'}`
        })
      })
    },

    // 审核显示对话框
    choiceCheck (questionInfo) {
      this.checkdialogVisible = true
      this.questionInfo = questionInfo
    }
  }
}
</script>

<style scoped lang='scss'>
.choice {
  margin: 10px 9px 0;
}
.el-link {
  margin-right: 5px;
}
.block {
  float: right;
  margin-top: 15px;
  height: 50px;
}
</style>
